<template>
    <div class="part-container">
        <!-- 左侧导航 -->
        <div class="nav-sidebar">
            <div 
                v-for="category in categories" 
                :key="category.id"
                :class="['nav-item', { active: currentCategory === category.id }]"
                @click="selectCategory(category.id)"
            >
                <i :class="category.icon"></i>
                <span>{{ category.name }}</span>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content-area">
            <div class="category-title">
                {{ getCurrentCategoryName() }}
                <span class="item-count">({{ partsList.length }}个)</span>
            </div>

            <div class="parts-grid">
                <div 
                    v-for="part in partsList" 
                    :key="part.id" 
                    class="part-card"
                    @click="showPartDetail(part)"
                >
                    <div class="part-image">
                        <img :src="part.image" :alt="part.name">
                        <div class="part-brand">{{ part.brand }}</div>
                    </div>
                    <div class="part-info">
                        <h3 class="part-name">{{ part.name }}</h3>
                        <p class="part-desc">{{ part.description }}</p>
                        <div class="part-footer">
                            <span class="part-price">¥{{ part.price }}</span>
                            <el-button 
                                type="primary" 
                                size="small"
                                @click.stop="add(part)"
                            >
                                加入购物车
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 零件详情弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            :title="selectedPart?.name"
            width="90%"
            class="part-dialog"
        >
            <div class="part-detail" v-if="selectedPart">
                <img :src="selectedPart.image" :alt="selectedPart.name">
                <div class="detail-info">
                    <h4>{{ selectedPart.brand }}</h4>
                    <p>{{ selectedPart.description }}</p>
                    <div class="specs">
                        <div class="spec-item" v-for="(spec, key) in selectedPart.specifications" :key="key">
                            <span class="spec-label">{{ key }}:</span>
                            <span class="spec-value">{{ spec }}</span>
                        </div>
                    </div>
                    <div class="detail-footer">
                        <span class="detail-price">¥{{ selectedPart.price }}</span>
                        <el-button type="primary" @click="add(selectedPart)">加入购物车</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { addToCart } from '@/api/index.js'

// 零件分类数据
const categories = ref([
    { id: 1, name: '车架', icon: 'iconfont icon-frame' },
    { id: 2, name: '变速器', icon: 'iconfont icon-derailleur' },
    { id: 3, name: '刹车', icon: 'iconfont icon-brake' },
    { id: 4, name: '车轮', icon: 'iconfont icon-wheel' },
    { id: 5, name: '坐垫', icon: 'iconfont icon-saddle' },
    { id: 6, name: '车把', icon: 'iconfont icon-handlebar' },
    { id: 7, name: '曲柄', icon: 'iconfont icon-crankset' },
    { id: 8, name: '踏板', icon: 'iconfont icon-pedal' },
])

const currentCategory = ref(1)
const partsList = ref([])
const dialogVisible = ref(false)
const selectedPart = ref(null)

// 选择分类
const selectCategory = async (categoryId) => {
    currentCategory.value = categoryId
    await loadPartsByCategory(categoryId)
}

// 获取当前分类名称
const getCurrentCategoryName = () => {
    const category = categories.value.find(c => c.id === currentCategory.value)
    return category ? category.name : ''
}

// 加载分类下的零件
const loadPartsByCategory = async (categoryId) => {
    try {
        // 这里替换为实际的API调用
        const res = await fetch(`/api/parts?category=${categoryId}`)
        const data = await res.json()
        partsList.value = data
    } catch (error) {
        ElMessage.error('加载零件数据失败')
    }
}

// 显示零件详情
const showPartDetail = (part) => {
    selectedPart.value = part
    dialogVisible.value = true
}

// 添加到购物车
const add = async (part) => {
    try {
        const userInfo = await getUserInfo() // 确保用户已登录
        if (!userInfo.data) {
            ElMessage.error('请先登录')
            return
        }

        const res = await addToCart({
            frameId: part.id,
            frameType: currentCategory.value // 根据当前分类确定类型
        });

        if (res.code === 200) {
            ElMessage.success('成功加入购物车')
        } else {
            ElMessage.error(res.msg || '加入购物车失败')
        }
    } catch (error) {
        console.error('添加购物车错误:', error)
        if (error.response?.status === 401) {
            ElMessage.error('请先登录')
        } else {
            ElMessage.error('加入购物车失败')
        }
    }
}

onMounted(() => {
    loadPartsByCategory(currentCategory.value)
})
</script>

<style lang="css" scoped>
.part-container {
    display: flex;
    height: 100vh;
    background: #f5f7fa;
}

.nav-sidebar {
    width: 80px;
    background: #fff;
    border-right: 1px solid #eee;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item i {
    font-size: 24px;
    margin-bottom: 4px;
    color: #666;
}

.nav-item span {
    font-size: 12px;
    color: #666;
}

.nav-item.active {
    background: #e6f2ff;
    color: #409eff;
}

.nav-item.active i,
.nav-item.active span {
    color: #409eff;
}

.content-area {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.category-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #333;
}

.item-count {
    font-size: 14px;
    color: #999;
    margin-left: 8px;
}

.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.part-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.part-card:active {
    transform: scale(0.98);
}

.part-image {
    position: relative;
    padding-top: 100%;
}

.part-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.part-brand {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.part-info {
    padding: 12px;
}

.part-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #333;
}

.part-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.part-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.part-price {
    color: #f56c6c;
    font-size: 16px;
    font-weight: 500;
}

.part-dialog {
    :deep(.el-dialog__body) {
        padding: 0;
    }
}

.part-detail {
    padding: 16px;
}

.part-detail img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 16px;
}

.detail-info h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.specs {
    margin: 16px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.spec-item {
    font-size: 14px;
}

.spec-label {
    color: #666;
    margin-right: 4px;
}

.detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.detail-price {
    color: #f56c6c;
    font-size: 20px;
    font-weight: 500;
}
</style>
